---
title: Installing a Vite or Rollup plugin
description: Learn how you can import YAML data by adding a Rollup plugin to your project.
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astro builds on top of Vite, and supports both Vite and Rollup plugins. This recipe uses a Rollup plugin to add the ability to import a YAML (`.yml`) file in Astro.

## Recipe

<Steps>
1. Install `@rollup/plugin-yaml`:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add @rollup/plugin-yaml --dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. Import the plugin in your `astro.config.mjs` and add it to the Vite plugins array:

    ```js title="astro.config.mjs" ins={2,5-7}
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';

    export default defineConfig({
      vite: {
        plugins: [yaml()]
      }
    });
    ```

3. Finally, you can import YAML data using an `import` statement:

    ```js
    import yml from './data.yml';
    ```

    :::note
    While you can now import YAML data in your Astro project, your editor will not provide types for the imported data. To add types, create or find an existing `*.d.ts` file in the `src` directory of your project and add the following:
    ```ts title="src/files.d.ts"
    // Specify the file extension you want to import
    declare module "*.yml" {
      const value: any; // Add type definitions here if desired
      export default value;
    }
    ```
    This will allow your editor to provide type hints for your YAML data.
    :::
</Steps>
